<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style type="text/css">
			#guagua{
				width: 500px;
				height: 100px;
				margin: 50px auto;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.content{
				/* width: 500px;
				height: 100px; */
			}
			#canvas{
				width: 500px;
				height: 100px;
				position: absolute;
				top: 0;
				left: 0;
			}
		</style>
		<div id="guagua">
			<div class="content">hahaha</div>
			<canvas id="canvas" width="500" height="100"></canvas>
		</div>
		<script type="text/javascript">
			function make(color='cadetblue'){
				let width=document.getElementById('guagua').clientWidth
				let heigth=document.getElementById('guagua').clientHeight
				let can=document.getElementById('canvas')
				let pen=can.getContext('2d')
				let con=document.getElementsByClassName('content')[0]
				can.width=width
				can.heigth=heigth
				pen.fillStyle=color
				pen.fillRect(0,0,500,100)
				pen.fillStyle='wheat'
				pen.font='20px 黑体'
				pen.fillText('抽奖',150,50)
				let onDrag=false
				function begin(ev){
					onDrag=true
					can.addEventListener('mousemove',move,false)
				}
				function move(ev){
					let e=ev||window.event,tar=ev.target||ev.srcElement,tarName=tar.tagName.toLowerCase()
					let x=e.pageX-con.offsetLeft,y=e.pageY-con.offsetTop
					if(onDrag){
						console.log(e.offsetX,e.offsetY);
						pen.globalCompositeOperation='destination-out'
						pen.beginPath();
						pen.translate(0,0)
						console.log(e.offsetX,e.offsetY);
						pen.arc(e.offsetX,e.offsetY,10,0,Math.PI*2)
						pen.fill()
						pen.closePath();
					}
				}
				function end(ev){
					if(onDrag){
						can.removeEventListener('mousemove',move,false)
						onDrag=false
					}
				}
				can.addEventListener('mousedown',begin,false)
				can.addEventListener('mouseup',end,false)
			}
			make()
			
			
			
			// function makeLine(callback){
			// 	let c1=document.createElement('canvas')
			// 	c1.width=c1.height=500
			// 	var pen=c1.getContext('2d')
			// 	callback(pen)
			// 	pen.stroke()
			// 	document.body.appendChild(c1)
			// }
			// makeLine(pen=>{
			// 	pen.fillStyle='yellow'
			// 	pen.fillRect(100,100,200,200)
				
			// 	// destination-xxx与source-xxx效果相反
			// 	// pen.globalCompositeOperation='source-out'
			// 	// pen.globalCompositeOperation='source-in'
			// 	// pen.globalCompositeOperation='source-atop'
			// 	// pen.globalCompositeOperation='source-over'
				
			// 	pen.globalCompositeOperation='destination-out'
			// 	// pen.globalCompositeOperation='destination-in'
			// 	// pen.globalCompositeOperation='destination-atop'
			// 	// pen.globalCompositeOperation='destination-over'
				
			// 	// 这两个一样
			// 	// pen.globalCompositeOperation='lighter'
			// 	// pen.globalCompositeOperation='xor'
				
			// 	// pen.globalCompositeOperation='copy'
				
			// 	pen.fillStyle='blue'
			// 	// 只能fillRect不能fill
			// 	pen.fillRect(200,200,200,200)
			// })
			
		</script>
	</body>
</html>
